<template>
  <div class="page pb-60">
    <!-- 顶部栏 -->
    <Base-Navbar title="商品详情" left-arrow></Base-Navbar>

    <div class="container">
      <!-- 封面 -->
      <div class="flex flex-center mb-30">
        <van-image
          class="cover radius radius--lg"
          :src="detail.image"
        ></van-image>
      </div>

      <!-- 名称 -->
      <div class="title ta-center mb-30">
        {{ detail.title }}
      </div>

      <div class="flex flex-rb cl-success mb-30">
        <!-- 原价 -->
        <div>
          <span>原价：</span>
          <span>{{ detail.marketprice }} U</span>
        </div>

        <!-- 现价 -->
        <div>
          <span>现价：</span>
          <span>{{ detail.price }} U</span>
        </div>
      </div>

      <!-- 商品介绍 -->
      <div class="ta-center">
        <div class="title mb-10">商品介绍</div>
        <div v-html="detail.content"></div>
      </div>
    </div>

    <!-- 底部栏 -->
    <div class="footer flex flex-rr">
      <van-button type="primary" plain @click="confirmVisible = true">
        添加购物车
      </van-button>
      <van-button type="primary" @click="confirmVisible = true">
        立即购买
      </van-button>
    </div>

    <!-- 加入购物车、立即购买 -->
    <van-popup v-model:show="confirmVisible">
      <div style="width: 320px">
        <div class="title ta-center mb-20">选择规格</div>

        <div class="mb-20">
          <product-item :isDetail="true" :v="detail"></product-item>
        </div>

        <!-- SKU -->
        <div class="mb-20">SKU</div>

        <!-- 数量 -->
        <div class="mb-20">
          <div class="mb-10">输入购买数量</div>
          <div>
            <van-stepper
              @click.stop
              @change="setShopcarNum(v)"
              v-model="detail.count"
            ></van-stepper>
          </div>
        </div>

        <div>
          <van-button type="primary" round block native-type="submit">
            提交
          </van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import api from 'js/api'

import productItem from './components/product_item.vue'

const route = useRoute()
const detail = ref({})
const confirmVisible = ref(false)

getProductDetail()

// 获取商品详情
async function getProductDetail() {
  const params = {
    id: route.query.id,
  }

  const { code, data } = await api.getProductDetail(params)

  if (code === 1) {
    detail.value = data
  }
}
</script>

<style lang="scss" scoped>
.cover {
  width: 220px !important;
  height: 120px;
}

.footer {
  :deep(.van-button) {
    border: none;

    &:first-child {
      border-radius: 100px 0 0 100px !important;
    }

    &:last-child {
      border-radius: 0 100px 100px 0 !important;
    }
  }
}
</style>
